<template>
 <div id="shop-item">
   <div class="item-selector" @click="checkedChange">
       <check-button  :is-checked="product.checked"></check-button>
   </div>
   <div class="item-img">
       <img :src="product.image" alt="">
   </div>
   <div class="item-info">
       <div class="item-title">{{product.title}}</div>
       <div class="item-desc">{{product.desc}}</div>
       <div class="info-bottom">
           <div class="item-price left">{{product.price}}</div>
           <div class="item-count right">{{product.count}}</div>
       </div>
   </div>
 </div>
</template>

<script>
import CheckButton from 'components/content/checkButton/CheckButton'
 export default {
  name:'',
  data () {
   return {

   };
  },
    props: {
        product:{
            type:Object,
            defaut(){
                return {}
            }
        }
    },
  components: {
      CheckButton
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
      checkedChange(){
        //   console.log("dddd");
          this.product.checked=!this.product.checked
      }
  },

  watch: {}

 }

</script>
<style scoped>
 #shop-item{
     width: 100%;
     display: flex;
     font-size: 0;
     padding: 5px;
     border-bottom: 1px solid #ccc;
 }
 .item-selector{
     width: 10px;
     display: flex;
     justify-content: center;
     align-items: center;

 }
 .item-title,.item-desc{
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 .item-img{
     padding: 5px;
 }
  .item-img img{
     width: 80px;
     height: 80px;
     display: block;
     border-radius: 5px;
 }

    .item-info{
        font-size: 17px;
        color: #335;
        display: block;
        padding: 5px 10px;
        position: relative;
        overflow: hidden;
    }
 .item-info,.item-desc{
     font-size: 14px;
     color: #666;
     margin-top: 15px;
 }
 .info-bottom{
     margin-top: 10px;
     position: absolute;
     bottom: 10px;
     left: 10px;
     right: 10px;
 }
 .info-bottom,.item-price{
     color: orange;
 }
</style>